import { Layout, Menu, Breadcrumb, Dropdown, Button } from 'antd';
import {
  UserOutlined,
  LineChartOutlined,
  AppstoreOutlined,
  TeamOutlined,
  FieldTimeOutlined,
  LikeOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  BellOutlined,
  CalendarOutlined,
  CheckSquareOutlined,
  ReadOutlined,
  FileAddOutlined,
} from '@ant-design/icons';
import './index.less';
import React from 'react';
import { history, request } from 'umi';
import { Link } from 'react-router-dom';
/** 导入用户登录返回数据判断*/
// import user from '@/user';

class SiderDemo extends React.Component {
  state = {
    collapsed: false,
  };

  toggle = () => {
    this.setState({
      collapsed: !this.state.collapsed,
    });
  };

  render() {
    const { SubMenu } = Menu;
    const { Header, Sider, Content } = Layout;
    /**获得用户名称 */
    let token = window.localStorage.getItem('token');
    let userJson = window.localStorage.getItem('userName');
    console.log(userJson);
    if (!token) {
      //history.replace('/');
    }
    const out = async () => {
      window.localStorage.setItem('userName', '');
    };
    return (
      <Layout>
        <Header className="header">
          {React.createElement(
            this.state.collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
            {
              className: 'trigger',
              onClick: this.toggle,
            },
          )}
          <h2 className="h2">学生实训考勤管理系统</h2>
          <Link to="" className="tcdl">
            {/* <span id="username">{userJson}</span> */}
            <Button type="link" onClick={out}>
              退出登录
            </Button>
          </Link>
        </Header>
        <Layout>
          <Sider
            className="sider"
            trigger={null}
            collapsible
            collapsed={this.state.collapsed}
          >
            <Menu
              className="menu"
              defaultSelectedKeys={['1']}
              // defaultOpenKeys={['sub1']}
              mode="inline"
              inlineCollapsed={this.state.collapsed}
            >
              <Menu.Item key="1" icon={<AppstoreOutlined />}>
                <Link to="/Admin/GroupManager">项目组管理</Link>
              </Menu.Item>
              <Menu.Item key="2" icon={<ReadOutlined />}>
                <Link to="/Admin/CourseAdmin/index">课程管理</Link>
              </Menu.Item>
              <Menu.Item key="3" icon={<FieldTimeOutlined />}>
                <Link to="/Admin/CheckAdmin/index">考勤管理</Link>
              </Menu.Item>
              <Menu.Item key="4" icon={<CalendarOutlined />}>
                <Link to="/Admin/LeaveRecord/index">请假记录</Link>
              </Menu.Item>
              <Menu.Item key="5" icon={<CheckSquareOutlined />}>
                <Link to="/Admin/ScoreAdmin/index">综合打分记录</Link>
              </Menu.Item>

              <SubMenu key="sub1" icon={<FileAddOutlined />} title="信息管理">
                <Menu.Item key="6" icon={<TeamOutlined />}>
                  <Link to="/Admin/teacherManager">教师信息管理</Link>
                </Menu.Item>
                <Menu.Item key="7" icon={<TeamOutlined />}>
                  <Link to="/Admin/studentManager">学生信息管理</Link>
                </Menu.Item>
                <SubMenu
                  key="sub2"
                  icon={<FileAddOutlined />}
                  title="个人信息管理"
                >
                  <Menu.Item key="8" icon={<UserOutlined />}>
                    <Link to="/Admin/ModifyPassword/index">修改密码</Link>
                  </Menu.Item>
                </SubMenu>
              </SubMenu>
            </Menu>
          </Sider>

          <Layout style={{ padding: '0px 24px 0px 24px' }}>
            <Content >{this.props.children}</Content>
            <p style={{ textAlign: 'center' }}>
              联系电话：023-67886609 网站备案/许可证号：渝ICP备19014044号
              重庆数宜信信用管理有限公司 版权所有 © 2019
              <br />
              <br />
              <Link to="/#">关于我们</Link>
            </p>
          </Layout>
        </Layout>
      </Layout>
    );
  }
}

export default SiderDemo;
